<style>
    /* 格子渐变背景 */
    .roots {
        margin: 0;
        min-height: calc(100vh - 16px);

        /* 核心背景代码 */
        background-image:
            /* 水平条纹 */
                repeating-linear-gradient(
                        to right,
                        rgba(208, 92, 246, 0.05) 0px,
                        rgba(208, 92, 246, 0.05) 10px,
                        transparent 10px,
                        transparent 20px
                ),
                    /* 垂直条纹 */
                repeating-linear-gradient(
                        to bottom,
                        rgba(208, 92, 246, 0.05) 0px,
                        rgba(208, 92, 246, 0.05) 10px,
                        transparent 10px,
                        transparent 20px
                );

        /* 背景参数 */
        background-size: 20px 20px;    /* 每个格子大小 */
        background-attachment: fixed;  /* 固定背景 */
        background-position: 0 0;      /* 对齐方式 */
    }

    /* 示例内容样式 */
    .container {
        /*width: 100%;*/
        padding: 2rem;
        color: #333;
    }
    .text-center{
        width: 950px;
        height: 500px;
        background-color: #ffffff;
        margin-top: 20vh;
        margin-left: calc((100% - 950px - 1rem)/2);
        padding: 20px;
        /* 新增阴影核心代码 */
        box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 基础阴影 */
        border-radius: 8px; /* 可选圆角 */

        /* 阴影过渡动画 */
        /*transition:*/
        /*        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),*/
        /*        transform 0.5s ease-in-out;*/
    }

    /* 固定容器样式 */
    .image-container {
        width: 500px;       /* 容器固定宽度 */
        height: 500px;      /* 容器固定高度 */
        border: 0px solid #ccc; /* 可选边框用于观察 */
        overflow: hidden;   /* 隐藏溢出部分 */
        /*margin: 50px auto;  !* 居中显示 *!*/
        cursor: pointer;
    }
    .padd{
        /*padding: 50px;*/
    }

    /* 图片动画样式 */
    .animated-image {
        width: 100%;
        height: 100%;
        object-fit: cover;  /* 保持比例填充 */
        transition: transform 0.5s ease-in-out; /* 核心动画 */
        transform-origin: center center;        /* 缩放基准点 */
    }

    /* 默认缩小状态 */
    .animated-image {
        transform: scale(1.1);
    }

    /* 悬停放大状态 */
    .image-container:hover .animated-image {
        transform: scale(1.0);
    }
    .ypuce{
        padding: 10px;
        color: var(--el-color-primary);
        margin-top: 10vh;
    }
    #app{
        font-size: 20px;
    }
</style>
<div id="app" v-cloak>
    <div class="roots">
        <div class="container flex-column flex-content-center">
            <div class="text-center">
                <div class="flex-row flex-content-between">
                    <div class="image-container">
                        <!-- 替换为你自己的图片地址 -->
                        <img
                                src="/app/muadmin/image/bg.jpg"
                                alt="示例图片"
                                class="animated-image"
                        >
                    </div>
                    <div class="flex-column ypuce">
                        <h1>登录</h1>
                        <el-form :model="loginForm" :rules="rules" label-width="auto" style="width: 400px;margin-bottom: 20px" @keyup.enter.native="onSubmit">
                            <el-form-item label="" prop="username">
                                <el-input size="40" v-model="loginForm.username" placeholder="账户" prefix-icon="UserFilled"/>
                            </el-form-item>
                            <el-form-item label="" prop="password">
                                <el-input type="password" v-model="loginForm.password"  placeholder="密码"  show-password prefix-icon="Lock"/>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit" style="width: 100%">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>